<template>
	<view class="index">
		<uni-card :title="post.title" margin="10px">
			<view class="card">

				<view class="car-title-view" :v-if="post.length>0">
					<uni-card is-shadow margin="0">
						<rich-text :nodes="post.content"></rich-text>
						<!-- <image class="card-img" v-if="data.img" :src="data.img" @error="data.img=''" @click="previmg(data.img)"></image> -->
						<!-- <video v-if="data.video" :src="data.video" controls></video> -->
						<view class="iconbottom">
							<!-- <view @click="setlike('like', 0, data.id)"
								:class="data.type && data.type == 'like' ? 'active' : ''"
								class="iconfont icon-appreciate_light">
								<text>{{ likeCount }}</text>
							</view> -->
						<!-- 	<view @click="setlike('hate', 0, data.id)"
								:class="data.type && data.type == 'hate' ? 'active' : ''"
								class="icon-oppose_light iconfont">
								<text>{{ data.hate }}</text>
							</view> -->
						</view>
					</uni-card>
				</view>
			</view>

			<!-- <text class="loadMore" v-if="loading">加载中...</text> -->
			<!-- value.avatar ? value.avatar : '../../static/logo.png' -->
			<view class="uni-list" v-if="comments.length">
				<view class="uni-list-cell" v-for="(value, key) in comments" :key="key">
					<view class="uni-media-list">
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-bottom" >
								<image class="uni-media-list-logo" :src="value.user.headerUrl ">
								</image>
								<text>{{ value.user.username }}</text>
								<text style="font-size:20rpx">{{ formatDateTime(value.comment.createTime) }}</text>
							</view>
							<view class="uni-media-list-text-top" >{{ value.comment.content }}</view>
						</view>
					</view>
				</view>
			</view>

		</uni-card>
		<div class="sto"></div>

		<view class="section">
			<!-- <textarea @focus="checklogin" v-model="newComment.content" placeholder="期待你的神评论" /> -->
			<textarea  @focus="checklogin" v-model="newComment.content" placeholder="期待你的神评论" />
			<button form-type="submit" size="mini" @click="send">发表评论</button>
		</view>


		<!-- <button open-type="getUserInfo" v-if="showlogin" id="showlogin" type="warn" @getuserinfo="login">使用微信登录</button> -->
		<!-- <view id="mask" @click="showlogin = false" v-if="showlogin"></view> -->
	</view>
</template>

<style>
	@import '../../../../common/uni.css';
	.sto {
		  height: 100px;
	}
	.section {
		display: block;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 200;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		padding: 5rpx;
		/* 这里可以根据需要设置高度 */
		background-color: #aaa;

	}

	.section textarea {
		background: #eee;
		display: block;
		left: 10rpx;
		font-size: 25rpx;
		padding: 10rpx 30rpx;
		width: 70%;
		height: 70rpx;
		z-index: 10;
		border: 1 solid #666;
		border-radius: 100rpx;
	}

	.section button {
		display: block;
		position: absolute;
		right: 10rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		z-index: 3;
		margin:  auto;
		border-radius: 100rpx;
	}

	.uni-media-list-logo {
		width: 60rpx;
		height: 60rpx;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		font-size: 28rpx;
		overflow: hidden;
		margin-top: 15rpx;
		word-break: break-all;
	}

	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.uni-media-list-text-bottom text {
		margin: auto 15rpx;
	}
</style>

<script>
	/* *
	 *评论页面
	 * */
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import util, {
		parGetData,
		parSetData,
		checklogin
	} from '../../../../common/util.js';
	import MarkdownIt from 'markdown-it'
	const md = new MarkdownIt()
	export default {
		data() {
			return {
				data: {},
				detailDec: '',
				text: '',
				id: '',
				discussId: '',
				showlogin: false,
				replylist: [],
				fetchPageNum: 1,
				openid: '',
				token: '',
				userinfo: '',
				loading: true,
				current: 1,
				limit: 10,
				discussId: 0,
				newComment: {
					content: "再回一个",
					entityId: 1,
					entityType: 2,
					targetId: 102
				},
				// comments: [{
				// 	replyCount: 1,
				// 	replys: [{
				// 		likeCount: 0,
				// 		likeStatus: 0,
				// 		reply: {
				// 			id: 6,
				// 			userId: 2,
				// 			entityType: 2,
				// 			entityId: 5,
				// 			targetId: 118,
				// 			content: "给你发个评论",
				// 			status: 0,
				// 			createTime: "2023 - 10 - 19 T16: 10: 18.000 + 0000"
				// 		},
				// 		user: {
				// 			id: 2,
				// 			username: "admin",
				// 			password: "",
				// 			salt: "",
				// 			email: "admin@banbang.com",
				// 			type: 1,
				// 			status: 1,
				// 			activationCode: "671f3fdb898e455997aec3d2bcb695a6",
				// 			headerUrl: "http://images.nowcoder.com/head/50t.png",
				// 			createTime: "2021-02-10T14:27:00.000+0000",
				// 			wechatOpenId: null
				// 		},
				// 		target: {
				// 			id: 118,
				// 			username: "班马NZ7N60009",
				// 			password: "",
				// 			salt: "",
				// 			email: null,
				// 			type: 0,
				// 			status: 1,
				// 			activationCode: null,
				// 			headerUrl: "http://images.nowcoder.com/head/721t.png",
				// 			createTime: "2023-10-17T17:11:00.000+0000",
				// 			wechatOpenId: "oh-fJ6cJghjkycP6Wko5DrJOQm-M"
				// 		}
				// 	}],
				// 	comment: {
				// 		id: 5,
				// 		userId: 118,
				// 		entityType: 1,
				// 		entityId: 50,
				// 		targetId: 118,
				// 		content: "哈哈哈哈哈哈哈哈哈哈哈哈哈",
				// 		status: 0,
				// 		createTime: "2023-10-18T16:58:42.000+0000"
				// 	},
				// 	likeCount: 0,
				// 	likeStatus: 0,
				// 	user: {},
				// }],
				comments: [],
				post: {
					id: 3,
					userId: 1,
					title: "这个是不为空的标题",
					content: "",
					type: 0,
					status: 0,
					createTime: "2023-09-24T03:11:52.000+0000",
					commentCount: 0,
					score: 3553,
					isDeleted: 0
				},
				likeCount: 0,
				likeStatus: 0,
				user: {
					id: 1,
					username: "SYSTEM",
					password: "",
					salt: "",
					email: "system@banbang.com",
					type: 0,
					status: 1,
					activationCode: null,
					headerUrl: "http://static.nowcoder.com/images/head/notify.png",
					createTime: "2020-01-12T18:11:03.000+0000",
					wechatOpenId: null
				}


			};
		},
		onShow() {
			// this.checkstat();

			this.fetchPageNum = 1;
			// this.getData(this.id);
		},
		onLoad(e) {

			// e.data为获取的字符串
			// data 为传递来的笑话数据结构
			this.id = e.id;
			this.discussId = e.discussId;
			this.getDiscussDetail(e.discussId);
			var self = this;
			// uni.getStorage({
			// 	key: 'detail-' + this.id,
			// 	success: function(res) {
			// 		self.data = parGetData(res.data);
			// 		var title = self.data.text;
			// 		if (title) {
			// 			title = title.replace(/<*?>/gi, '').substr(0, 12);
			// 			self.detailDec = title;
			// 			uni.setNavigationBarTitle({
			// 				title: title
			// 			});
			// 		}
			// 	},
			// 	complete: function() {
			// 		this.loading = false;
			// 	}
			// });
		},
		onShareAppMessage() {
			return {
				title: this.detailDec ? this.detailDec : '最新最好笑的趣事趣图，来看下吧',
				path: '/pages/detail/detail?id=' + this.id
			};
		},
		methods: {
			checkstat() {
				var logininfo = util.checklogin();
				this.openid = logininfo.openid;
				this.userinfo = logininfo.userinfo;
				this.token = logininfo.token;
			},
			checklogin() {
				if (!this.token) {
					//#ifdef APP-PLUS
					uni.showModal({
						title: '请登录',
						content: '请登录后继续操作',
						confirmText: '去登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/platforms/app-plus/login/login'
								});
								return false;
							}
						}
					});
					return false;
					//#endif
					this.showlogin = true;
					return false;
				}
				return true;
			},
			send(e) {
				// if (!this.checklogin()) {
				// 	return false;
				// }
				if (!this.newComment.content) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return false;
				}
				var self = this;
				// "content": "再回一个",
				//   "entityId": 1,
				//   "entityType": 2,
				//   "targetId": 102
				self.$http({

					url: `/api/comment/add/` + self.discussId,
					method: 'POST',
					data: {
						content: self.newComment.content,
						entityId: self.discussId,
						entityType: self.newComment.entityId,
						targetId: self.user.id,
					},
					header: {
						ticket: uni.getStorageSync("ticket"),
					},
				}).then(ret => {
					// if (ret.statusCode == 200 && ret.data.code < 1) {
					// 	self.text = '';
					// 	uni.showToast({
					// 		title: '审核后显示'
					// 	});
					// 	setTimeout(function() {
					// 		uni.hideLoading();
					// 	}, 1000);
					// } else {
					// 	uni.showToast({
					// 		title: ret.data.msg,
					// 		icon: 'none'
					// 	});
					// 	setTimeout(function() {
					// 		uni.hideLoading();
					// 	}, 1000);
					// }
				})
			},
			setlike(type, index, tid) {
				util.setlike(this, this.data, type, tid);
			},
			previmg(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			onReachBottom() {
				/* 到底部加载 */
				this.getData(this.id);
				this.getDiscussDetail(this.id);
			},
			getDiscussDetail(discussId) {
				const than = this
				const url =
					`/api/discuss/detail/${discussId }?current=${this.current}&limit=${this.limit}`
				this.$http({
					url: url,
					method: 'GET',
					data: {},
					header: {
						'ticket': uni.getStorageSync('ticket')
					}
				}).then(res => {
					console.log(res.data.data.discussPosts)
					this.$data.discussPosts = res.data.data.discussPosts
					than.post = res.data.data.post
					than.user = res.data.data.user
					than.likeCount = res.data.data.likeCount
					than.likeStatus = res.data.data.likeStatus
					than.comments = res.data.data.comments
					than.post.content = md.render(res.data.data.post.content)
				})
			},

			// getData(id) {
			// 	var self = this;
			// 	self.loading = true;
			// 	// 获取评论
			// 	uni.request({
			// 		url: util.apiurl + 'syj/index/getpinglun',
			// 		method: 'POST',
			// 		dataType: 'json',
			// 		data: {
			// 			page: self.fetchPageNum,
			// 			pagesize: 20,
			// 			order: 'addtime',
			// 			id: self.id,
			// 			token: self.token,
			// 			shebei: util.shebei
			// 		},
			// 		success: ret => {
			// 			self.loading = false;
			// 			if (ret.statusCode !== 200) {
			// 				uni.showToast({
			// 					title: '请求数据失败请重试' + ret.statusCode,
			// 					duration: 2000,
			// 					icon: 'none'
			// 				});
			// 			} else {
			// 				if (self.fetchPageNum < 2) {
			// 					// 这是刚进入时第一页
			// 				} else if (ret.data.replylist.length < 1) {
			// 					// 大于第一页且无评论
			// 					uni.showToast({
			// 						title: '没有更多评论了',
			// 						icon: 'none'
			// 					});
			// 					return false;
			// 				}
			// 				// 第一页或者大于第一页且有评论时到这里
			// 				self.replylist = self.replylist.concat(ret.data.replylist);
			// 				self.fetchPageNum += 1;
			// 			}
			// 		},
			// 		fail: res => {
			// 			uni.showToast({
			// 				title: '请求数据失败请重试',
			// 				duration: 2000,
			// 				icon: 'none'
			// 			});
			// 		},
			// 		complete: function() {
			// 			self.loading = false;
			// 		},
			// 		header: {
			// 			auth: util.httpauth
			// 		}
			// 	});
			// },
			formatDateTime(dateTimeStr) {
				const date = new Date(dateTimeStr);
				return this.formatDate(date, 'yyyy年MM月dd日');

			},
			formatDate(date, format) {
				const map = {
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'H+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分钟
					's+': date.getSeconds(), // 秒钟
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					S: date.getMilliseconds() // 毫秒
				};

				if (/(y+)/.test(format)) {
					format = format.replace(
						RegExp.$1,
						(date.getFullYear() + '').substr(4 - RegExp.$1.length)
					);
				}

				for (let key in map) {
					if (new RegExp('(' + key + ')').test(format)) {
						format = format.replace(
							RegExp.$1,
							RegExp.$1.length === 1 ? map[key] : ('00' + map[key]).substr(('' + map[key]).length)
						);
					}
				}

				return format;
			}
		}
	};
</script>